import React from 'react';
import { useAuth } from '@/hooks/useAuth';

export default function TestDashboard() {
  console.log('TestDashboard: Component rendering');
  
  const { user, logout } = useAuth();

  console.log('TestDashboard: User data', { user });

  const handleLogout = () => {
    console.log('TestDashboard: Logging out');
    logout();
    window.location.href = '/admin/login';
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <div className="bg-white shadow">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-4">
            <h1 className="text-xl font-semibold text-gray-900">管理员仪表盘</h1>
            <button
              onClick={handleLogout}
              className="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700"
            >
              退出登录
            </button>
          </div>
        </div>
      </div>
      
      <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <div className="bg-white overflow-hidden shadow rounded-lg">
            <div className="px-4 py-5 sm:p-6">
              <h2 className="text-lg font-medium text-gray-900 mb-4">登录成功！</h2>
              
              <div className="space-y-3">
                <div>
                  <span className="font-medium text-gray-700">用户名: </span>
                  <span className="text-gray-900">{user?.username || '未知'}</span>
                </div>
                
                <div>
                  <span className="font-medium text-gray-700">角色: </span>
                  <span className="text-gray-900">{user?.role || '未知'}</span>
                </div>
                
                <div>
                  <span className="font-medium text-gray-700">状态: </span>
                  <span className={`px-2 py-1 rounded text-sm ${
                    user?.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                  }`}>
                    {user?.is_active ? '活跃' : '非活跃'}
                  </span>
                </div>
              </div>
              
              <div className="mt-6">
                <h3 className="font-medium text-gray-700 mb-3">管理功能</h3>
                <div className="grid grid-cols-2 gap-4">
                  <a
                    href="/admin/banners"
                    className="block p-4 bg-blue-50 rounded-lg text-center hover:bg-blue-100"
                  >
                    <div className="text-blue-600 font-medium">轮播图管理</div>
                  </a>
                  
                  <a
                    href="/admin/news"
                    className="block p-4 bg-green-50 rounded-lg text-center hover:bg-green-100"
                  >
                    <div className="text-green-600 font-medium">新闻管理</div>
                  </a>
                  
                  <a
                    href="/admin/services"
                    className="block p-4 bg-purple-50 rounded-lg text-center hover:bg-purple-100"
                  >
                    <div className="text-purple-600 font-medium">服务管理</div>
                  </a>
                  
                  <a
                    href="/admin/company-info"
                    className="block p-4 bg-orange-50 rounded-lg text-center hover:bg-orange-100"
                  >
                    <div className="text-orange-600 font-medium">公司信息</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
